import { storeToRefs } from 'pinia'
import { createRouter, createWebHistory } from 'vue-router'
import Store from '../stores/use'


const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      redirect: '/index',
      component: () => import('../views/index.vue'),
      children: [
        {
          path: '/index',
          name: 'index',
          component: () => import('../views/main/main.vue'),
          //单独配置动画效果
          meta: {
            enter_animation: 'animate__animated animate__fadeInRightBig animate__fast',
            leave_animation:'animate__animated  animate__fadeOutLeftBig animate__faster'
          }
        },
        {
          path: '/search',
          name: 'search',
          component: () => import('../views/search/search.vue'),
          meta: {
            enter_animation: 'animate__animated animate__fadeInRightBig animate__fast',
            leave_animation: 'animate__animated  animate__fadeOutLeftBig animate__faster'
          }
        },
        {
          path: '/article',
          name: 'article',
          component: () => import('../views/article/article.vue'),
          meta: {
            enter_animation: 'animate__animated animate__fadeInRightBig  animate__fast',
            leave_animation: 'animate__animated  animate__fadeOutLeftBig animate__faster'
          }
        },
        {
          path: '/article/:cate',
          name: 'categoryofarticle',
          component: () => import('../views/categoryview/categoryview.vue'),
          meta: {
            enter_animation: 'animate__animated animate__fadeInUpBig  animate__fast',
            leave_animation: 'animate__animated  animate__fadeOutLeftBig animate__faster'
          }
        },
        {
          path: '/articleone/:id',
          name: 'specificarticle',
          component: () => import('../views/articleview/articleview.vue'),
          meta: {
            enter_animation: 'animate__animated animate__fadeInUpBig  animate__fast',
            leave_animation: 'animate__animated animate__fadeOutDownBig animate__fast'
          }
        },
        {
          path: '/timestamp',
          name: 'timestamp',
          component: () => import('../views/timestamp/timestamp.vue'),
          meta: {
            enter_animation: 'animate__animated animate__fadeInRightBig animate__fast',
            leave_animation: 'animate__animated  animate__fadeOutLeftBig animate__faster'
          }
        },
        { path:'/about',
        name:'about',
          component: () => import('../views/about/about.vue'),
          meta: {
            enter_animation: 'animate__animated animate__fadeInRightBig animate__fast',
            leave_animation: 'animate__animated  animate__fadeOutLeftBig animate__faster'
          }
        }, {
          path: '/404',
          name: '404',
          component: () => import('../views/status/404.vue')
        }
      ]
    },

  ]
})

//Flag:根据路由的属性来判断是否开启动画
router.beforeEach((to, from, next) => {
  if (from.meta.leave_animation) {
    let store = Store()()
    let { Animation } = storeToRefs(store)
    Animation.value = !Animation.value
    setTimeout(() => {
      next()
    }, 500);
  }
  else { 
    next()
  }
})

export default router
